<template>
  <div class="list-container">
    <div class="control-panel">
      <el-button type="primary" @click="startAnimation" :disabled="isPlaying">
        {{ isPlaying ? '播放中...' : '开始播放' }}
      </el-button>
      <el-button @click="stopAnimation" :disabled="!isPlaying">停止</el-button>
      <el-button @click="resetAnimation" :disabled="isPlaying">重置</el-button>
      <div class="search-box">
        <el-input v-model="searchQuery" placeholder="搜索景区名称" clearable @clear="handleSearch">
          <template #prefix>
            <i class="el-icon-search"></i>
          </template>
        </el-input>
      </div>
    </div>
    <div class="list-content" ref="listContent">
      <div class="year-marker">
        {{ currentYear }}年
      </div>
      <div class="timeline-line"></div>
      <div class="scenic-items">
        <div v-for="(item, index) in filteredScenics" 
             :key="index"
             class="scenic-item"
             :class="{ 'fade-in': item.visible }">
          <div class="scenic-dot"></div>
          <div class="scenic-info">
            <div class="scenic-name">{{ item.name }}</div>
            <div class="scenic-meta">
              <span class="scenic-year">{{ item.year }}年评定</span>
              <span class="scenic-location">{{ item.location }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ScenicList',
  data() {
    return {
      isPlaying: false,
      currentYear: 2007,
      animationInterval: null,
      currentIndex: 0,
      searchQuery: '',
      scenicSpots: [
        { year: 2007, name: '故宫博物院', location: '北京市', visible: false },
        { year: 2007, name: '颐和园', location: '北京市', visible: false },
        { year: 2007, name: '天坛公园', location: '北京市', visible: false },
        { year: 2007, name: '苏州园林', location: '江苏省', visible: false },
        { year: 2007, name: '杭州西湖', location: '浙江省', visible: false },
        { year: 2008, name: '武夷山风景区', location: '福建省', visible: false },
        { year: 2008, name: '庐山风景区', location: '江西省', visible: false },
        { year: 2009, name: '九寨沟风景区', location: '四川省', visible: false },
        { year: 2009, name: '黄龙风景区', location: '四川省', visible: false },
        { year: 2010, name: '张家界武陵源', location: '湖南省', visible: false },
        { year: 2010, name: '三亚亚龙湾', location: '海南省', visible: false },
        { year: 2011, name: '乐山大佛景区', location: '四川省', visible: false },
        { year: 2011, name: '峨眉山景区', location: '四川省', visible: false },
        { year: 2012, name: '泰山风景区', location: '山东省', visible: false },
        { year: 2012, name: '华山风景区', location: '陕西省', visible: false },
        { year: 2013, name: '龙门石窟', location: '河南省', visible: false },
        { year: 2013, name: '少林寺景区', location: '河南省', visible: false },
        { year: 2014, name: '丽江古城', location: '云南省', visible: false },
        { year: 2014, name: '平遥古城', location: '山西省', visible: false },
        { year: 2015, name: '莫高窟', location: '甘肃省', visible: false },
        { year: 2015, name: '秦始皇陵兵马俑', location: '陕西省', visible: false },
        { year: 2016, name: '武当山', location: '湖北省', visible: false },
        { year: 2017, name: '普陀山', location: '浙江省', visible: false },
        { year: 2017, name: '九华山', location: '安徽省', visible: false },
        { year: 2018, name: '雁荡山', location: '浙江省', visible: false },
        { year: 2018, name: '鼓浪屿', location: '福建省', visible: false },
        { year: 2019, name: '千岛湖', location: '浙江省', visible: false },
        { year: 2019, name: '南京夫子庙', location: '江苏省', visible: false },
        { year: 2020, name: '上海迪士尼度假区', location: '上海市', visible: false },
        { year: 2020, name: '大明宫国家遗址公园', location: '陕西省', visible: false },
        { year: 2021, name: '北京环球度假区', location: '北京市', visible: false },
        { year: 2021, name: '长城岭长城', location: '北京市', visible: false },
        { year: 2022, name: '云冈石窟', location: '山西省', visible: false },
        { year: 2023, name: '龙虎山', location: '江西省', visible: false },
        { year: 2023, name: '井冈山', location: '江西省', visible: false },
        { year: 2023, name: '张家界大峡谷', location: '湖南省', visible: false }
      ]
    }
  },
  computed: {
    filteredScenics() {
      if (!this.searchQuery) {
        return this.scenicSpots.slice(0, this.currentIndex)
      }
      return this.scenicSpots.filter(spot => 
        (spot.name.includes(this.searchQuery) || 
         spot.location.includes(this.searchQuery)) &&
        spot.visible
      )
    }
  },
  methods: {
    startAnimation() {
      if (this.isPlaying) return
      this.isPlaying = true
      this.animationInterval = setInterval(() => {
        if (this.currentIndex >= this.scenicSpots.length) {
          this.stopAnimation()
          return
        }
        
        const currentSpot = this.scenicSpots[this.currentIndex]
        this.currentYear = currentSpot.year
        this.scenicSpots[this.currentIndex].visible = true
        this.currentIndex++
        
        this.$refs.listContent.scrollTop = Math.max(
          0,
          (this.currentIndex - 5) * 80
        )
      }, 1000)
    },
    stopAnimation() {
      this.isPlaying = false
      clearInterval(this.animationInterval)
    },
    resetAnimation() {
      this.stopAnimation()
      this.currentIndex = 0
      this.currentYear = 2007
      this.scenicSpots.forEach(spot => {
        spot.visible = false
      })
      this.$refs.listContent.scrollTop = 0
      this.searchQuery = ''
    },
    handleSearch() {
      if (!this.searchQuery) {
        this.resetAnimation()
      }
    }
  }
}
</script>

<style scoped>
.list-container {
  width: 100%;
  height: 600px;
  display: flex;
  flex-direction: column;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.control-panel {
  padding: 15px 20px;
  display: flex;
  gap: 10px;
  background-color: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(139, 69, 19, 0.2);
}

.search-box {
  margin-left: auto;
  width: 200px;
}

.list-content {
  flex: 1;
  position: relative;
  overflow: hidden;
  height: calc(100% - 60px);
}

.timeline-line {
  position: absolute;
  left: 80px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: rgba(139, 69, 19, 0.5);
  z-index: 1;
}

.year-marker {
  position: sticky;
  top: 0;
  left: 20px;
  padding: 4px 8px;
  background-color: #8B4513;
  color: white;
  border-radius: 4px;
  font-weight: bold;
  z-index: 10;
  margin-bottom: 10px;
}

.scenic-items {
  position: relative;
  height: 100%;
  overflow-y: auto;
  padding: 20px 20px 20px 100px;
}

.scenic-item {
  position: relative;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.5s ease;
}

.scenic-item.fade-in {
  opacity: 1;
  transform: translateX(0);
}

.scenic-dot {
  position: absolute;
  left: -20px;
  top: 50%;
  width: 8px;
  height: 8px;
  background-color: #8B4513;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.scenic-info {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
  border-radius: 4px;
  padding: 12px 15px;
  border-left: 3px solid #8B4513;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.scenic-name {
  font-weight: bold;
  color: #5D4037;
  margin-bottom: 6px;
  font-size: 14px;
}

.scenic-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.scenic-year, .scenic-location {
  color: #8B4513;
  background-color: rgba(139, 69, 19, 0.1);
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: 500;
}

.scenic-items::-webkit-scrollbar {
  width: 6px;
}

.scenic-items::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.scenic-items::-webkit-scrollbar-thumb {
  background: rgba(139, 69, 19, 0.5);
  border-radius: 3px;
}

.scenic-items::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 69, 19, 0.8);
}
</style> 